<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { Locale } from 'vant'
import BScroll from "better-scroll";

// defineOptions({
//   name: 'home',
// });

definePageMeta({
  layout: 'default',
  // name: 'home',
  title: 'activity',
  i18n: 'menu.activity',
});
const swiperList = ref([
  {
    id: 1,
    img: '/game/jili_icon1.png',
    name: 'jili'
  },
  {
    id: 2,
    img: '/game/luva_icon1.png',
    name: 'luva'
  },
  {
    id: 3,
    img: '/game/pp_icon1.png',
    name: 'pppp'
  },
  {
    id: 4,
    img: '/game/pg_icon1.png',
    name: 'hhh'
  },
  {
    id: 5,
    img: '/game/pp_icon2.png',
    name: '方法'
  },
  {
    id: 6,
    img: '/game/jili_icon2.png',
    name: '夸克'
  },
  {
    id: 7,
    img: '/game/luva_icon2.png',
    name: 'QQ'
  },
])
const boxRef = ref<HTMLElement | null>(null)
const itemWidth = ref<number>(0)
  const isAtStart = ref(true)
  const isAtEnd = ref(false)
// 在组件挂载后获取子元素宽度
onMounted(() => {
  if (boxRef.value && boxRef.value.children.length > 0) {
    // 假设所有 .item 的宽度相同
    itemWidth.value = (boxRef.value.children[0] as HTMLElement).offsetWidth
    updateNavigationState()
  }
  
  boxRef.value?.addEventListener('scroll', updateNavigationState)
})
// 更新导航按钮状态
const updateNavigationState = () => {
  if (!boxRef.value) return

  const scrollLeft = boxRef.value.scrollLeft
  const scrollWidth = boxRef.value.scrollWidth
  const clientWidth = boxRef.value.clientWidth

  isAtStart.value = scrollLeft === 0
  isAtEnd.value = scrollLeft + clientWidth >= scrollWidth - 1 // 容错处理
}
const pre = () => {
  if (boxRef.value) {
    const currentScrollLeft = boxRef.value.scrollLeft
    const scrollAmount = itemWidth.value + 10 // 包含 mr-10 的间距

    // 向左滚动一个元素宽度
    boxRef.value.scrollTo({
      left: currentScrollLeft - scrollAmount,
      behavior: 'smooth'
    })
  }
}

const next = () => {
  if (boxRef.value && itemWidth.value) {
    const currentScrollLeft = boxRef.value.scrollLeft
    const scrollAmount = itemWidth.value + 10 // 加上间距

    boxRef.value.scrollTo({
      left: currentScrollLeft + scrollAmount,
      behavior: 'smooth'
    })
  }
}

</script>

<template>
   <div class="flex justify-between items-center w-100% relative"> 
    <van-icon name="arrow-left" :size="20" class="absolute left-0 top-3" @click="pre"  :class="{ 'opacity-30 cursor-not-allowed': isAtStart }"/>
    <div ref="boxRef" class="box  flex  items-center  flex-1">
      <div v-for="item in swiperList" :key="item.id" class="item  mr-10">
        <img :src="item.img" alt="" class="w-full  h-80% ">
        <div>{{ item.name }}</div>
      </div>
    </div>
    <van-icon name="arrow" :size="20"  class="absolute right-0 top-3"  @click="next"  :class="{ 'opacity-30 cursor-not-allowed': isAtEnd }"/>
  </div>
</template>

<style lang="css" scoped>
.box {
  display: flex;
  overflow-x: auto;
  /* 启用横向滚动 */
  white-space: nowrap;
  /* 防止换行 */
  -webkit-overflow-scrolling: touch;
  /* 在 iOS 上更流畅 */
  scrollbar-width: none;
  /* 可选：隐藏滚动条 */
  padding: 0 10px;
  /* margin: 20px; */
}

.item {
  flex: 0 0 auto;
  width: 32%;
  text-align: center;
  /* background: url('/img/un-menu-bg.png') no-repeat center center; */
  background-size: 100% 100%;
  box-sizing: border-box;
}
</style>